<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="../util/jquery-3.4.1.js"></script>
    <script src="../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/staff.css" />
    <link rel="stylesheet" type="text/css" href="../font/font-awesome-4.7.0/css/font-awesome.min.css" />
</head>
<body>
<h2 class="h2">员工管理</h2>
<div class="staff-part">
<span>所有员工</span>
<div class="col-lg-3 col-sm-2 col-md-2 ipthead">
    <div class="input-group input-group-sm">
        <input type="text" class="form-control" id="Search" placeholder="姓名,职位,工号" AUTOCOMPLETE="off">
        <span class="input-group-btn">
            <button class="btn btn-default con" type="button">搜索</button>
        </span>
    </div><!-- /input-group -->
</div>
<div class="add-department">
    <button type="button" class="btn btn-primary btn-md Add" data-toggle="modal" data-target="#addStaffModel"><span
            class="fa fa-plus-square" style="padding-right: 5px;"></span>添加员工</button>
    <button type="button" class="btn btn-success btn-md export">
                        <span class="fa fa-plus-square" style="padding-right: 5px;"></span>
        导出excel
    </button>
</div>
<div class="table-responsive department-table">
    <!--表头-->
    <table class="table table-bordered ">
        <thead>
        <tr style="font-size: 14px; border-bottom:3.5px solid #dee2e6 ;border-top: 2px solid #dee2e6 ;">
            <th>编号</th>
            <th>照片</th>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
            <th>性别</th>
            <th>出生日期</th>
            <th>联系方式</th>
            <th>工号</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <!--分页栏-->
    <nav aria-label="Page navigation">
        <ul class="pagination">
        </ul>
    </nav>
</div>
</div>
<!--添加模块-->
<div class="modal fade" id="addStaffModel" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加新员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <!--员工姓名-->
                    <div class="form-group">
                        <label for="addStaffLeader" class="col-sm-2 control-label">员工姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="addStaffLeader" placeholder="员工姓名" AUTOCOMPLETE="off">
                        </div>
                        <span class="col-sm-2"></span>
                        <p class="col-sm-10 addStaffRemind">错误！员工姓名长度在2-5字之间</p>
                    </div>
                    <!--员工部门-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-10">
                            <div class="dropdown myDropdown">
                                <button class="btn btn-default dropdown-toggle AddDepartment" type="button" data-toggle="dropdown">
                                    教育部
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu department"  style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--员工职位-->
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">职位</label>
                        <div class="col-sm-10">
                            <div class="dropdown myDropdown">
                                <button class="btn btn-default dropdown-toggle AddPost" type="button" data-toggle="dropdown">
                                    数学老师
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu post"  style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--员工性别-->
                    <div class="form-group">
                        <label  class="col-sm-2 control-label ">性别</label>
                        <div class="col-sm-10">
                            <div class="dropdown myDropdown">
                                <button class="btn btn-default dropdown-toggle AddSex" type="button" data-toggle="dropdown">
                                    男
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a href="javascript:;">男</a></li>
                                    <li><a href="javascript:;">女</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--出生日期-->
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">出生日期</label>
                        <div class="col-sm-10">
                            <div class="btn-group myDropdown">
                                <button  class="btn btn-default btn-sm dropdown-toggle AddYear" type="button" data-toggle="dropdown">1999<span class="caret"></span></button>
                                <ul class="dropdown-menu year" data-toggle="dropdown" style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                            <span>年</span>
                            <div class="btn-group  myDropdown">
                                <button  class="btn btn-default btn-sm dropdown-toggle AddMon" type="button" data-toggle="dropdown">1<span class="caret"></span></button>
                                <ul class="dropdown-menu mon" style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                            <span>月</span>
                            <div class="btn-group myDropdown">
                                <button class="btn btn-default btn-sm dropdown-toggle AddDay"  type="button" data-toggle="dropdown">1<span class="caret"></span></button>
                                <ul class="dropdown-menu Addday" style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                            <span>日</span>
                        </div>
                    </div>
                    <!--联系电话-->
                    <div class="form-group">
                        <label for="addStaffNumber" class="col-sm-2 control-label">联系电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control " id="addStaffNumber" placeholder="联系电话" AUTOCOMPLETE="off">
                        </div>
                        <span class="col-sm-2"></span>
                        <p class="col-sm-10 addStaffRemind">错误！请按正确的格式输入</p>
                    </div>
                    <!--工号-->
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">工号</label>
                        <div class="col-sm-10">
                            <button class="btn btn-default btn-sm AddJn" disabled type="button" data-toggle="dropdown">
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary AddReset">重置</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary AddTo">添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑模块 -->
<div class="modal fade" tabindex="-1" role="dialog" id="StaffEdit">
    <div class="modal-dialog" >
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" ><span >&times;</span></button>
                <h4 class="modal-title">编辑员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <!--员工姓名-->
                    <div class="form-group">
                        <label for="editStaffName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="editStaffName" placeholder="员工姓名" AUTOCOMPLETE="off">
                        </div>
                        <span class="col-sm-2"></span>
                        <p class="col-sm-10 addStaffRemind">错误！员工姓名长度在2-5字之间</p>
                    </div>
                    <!--员工部门-->
                    <div class="form-group">
                        <label class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-10">
                            <div class="dropdown myDropdown">
                                <button class="btn btn-default dropdown-toggle EditDepartment" type="button" data-toggle="dropdown">
                                    教育部
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu department"  style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--员工职位-->
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">职位</label>
                        <div class="col-sm-10">
                            <div class="dropdown myDropdown">
                                <button class="btn btn-default dropdown-toggle EditPost" type="button" id="dropdownMenux" data-toggle="dropdown">
                                    数学老师
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu post" style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--员工性别-->
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-10">
                            <div class="dropdown myDropdown">
                                <button class="btn btn-default dropdown-toggle EditSex" type="button"  data-toggle="dropdown">
                                    男
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" >
                                    <li><a href="javascript:;">男</a></li>
                                    <li><a href="javascript:;">女</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!--出生日期-->
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">出生日期</label>
                        <div class="col-sm-10">
                            <div class="btn-group myDropdown">
                                <button class="btn btn-default btn-sm dropdown-toggle EditYear" type="button" data-toggle="dropdown">
                                    1999<span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu year" style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                            <span>年</span>
                            <div class="btn-group myDropdown">
                                <button class="btn btn-default btn-sm dropdown-toggle EditMon" type="button" data-toggle="dropdown">
                                    1<span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu mon" style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                            <span>月</span>
                            <div class="btn-group myDropdown">
                                <button class="btn btn-default btn-sm dropdown-toggle EditDay" type="button" data-toggle="dropdown" >
                                    1<span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu Editday" style="height: 200px;overflow: auto">
                                </ul>
                            </div>
                            <span>日</span>
                        </div>
                    </div>
                    <!--员工电话-->
                    <div class="form-group">
                        <label for="editStaffLeaderPhone" class="col-sm-2 control-label">联系电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="editStaffLeaderPhone" placeholder="员工电话" AUTOCOMPLETE="off">
                        </div>
                        <span class="col-sm-2"></span>
                        <p class="col-sm-10 addStaffRemind">错误！电话号码格式不对</p>
                    </div>
                    <!--员工工号-->
                    <div class="form-group">
                        <label for="editStaffLeaderPhone" class="col-sm-2 control-label">员工工号</label>
                        <div class="col-sm-10">
                            <button class="btn btn-default  EditJn" disabled type="button"  data-toggle="dropdown">

                            </button>
                    </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="edit">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- 删除模块 -->
<div class="modal fade" tabindex="-1" role="dialog" id="StaffDelete">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" ><span >&times;</span></button>
                <h4 class="modal-title">删除信息</h4>
            </div>
            <div class="modal-body">
                <p>确定删除该信息？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="deletesResure">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src="../js/staff.js"></script>
<script src="../js/regularExpression.js"></script>
</html>